<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox, ElInput, ElRadioGroup, ElRadio,  ElButton, ElAffix, ElCol, ElIcon } from 'element-plus';
import axios from 'axios';
import { ArrowLeftBold } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
const router = useRouter();
//  Token解析工具函数
const getUserIdFromToken = (token: string) => {
  if (!token) return '';
  try {
    const payloadBase64 = token.split('.')[1];
    const decoded = JSON.parse(atob(payloadBase64));
    return decoded.sub || '';
  } catch (error) {
    console.error('解析Token失败:', error);
    return '';
  }
};


// 用户信息（初始化避免undefined）
const userList = ref({
  username: '',
  gender: 0,
  signature: '',
  phone: '',
  wechat_number: '',
  birthday: '',
  region: '',
  password: '',
  confirmPassword: ''
});

// 定位相关状态
const isLocation = ref(0); // 0=未选择，1=已选择
const address = ref(''); // 最终提交的地区值
const locationDialogVisible = ref(false); // 弹窗显隐
const nearbyLocations = reactive<Array<{ name: string; address: string }>>([]); // 定位到的地区列表
const selectedLocation = ref<{ name: string; address: string } | null>(null); // 选中的地区

// 弹窗关闭逻辑（重置数据）
const handleDialogClose = () => {
  nearbyLocations.length = 0;
  selectedLocation.value = null;
  locationDialogVisible.value = false;
};

//页面挂载：加载用户信息
onMounted(() => {
  const token = localStorage.getItem('token') || '';
  if (!token) {
    ElMessage.warning('未检测到登录态，请先登录');
    return;
  }

  const userId = getUserIdFromToken(token);
  if (!userId) {
    ElMessage.warning('Token解析失败或无效，无法获取用户ID');
    return;
  }

  // 请求用户信息（带超时）
  axios.get('http://localhost:8020/user/GetUserInfo', {
    params: { userId },
    timeout: 15000
  }).then(res => {
    const resData = res.data || {};
    userList.value = {
      ...resData,
      region: resData.region || '', // 地区默认空字符串
      password: '', // 密码字段初始为空（不修改时不提交）
      confirmPassword: ''
    };
    address.value = userList.value.region;
    isLocation.value = userList.value.region ? 1 : 0;
    console.log('用户信息加载成功：', userList.value);
  }).catch(err => {
    ElMessage.error('请求失败！检查网络或接口路径');
    console.log('错误详情：', err);
  });
});

// 保存用户信息（含表单校验）
const handleSave = () => {
  //地区校验
  if (isLocation.value === 1 && !address.value.trim()) {
    ElMessage.error('请选择有效的地区');
    return;
  }

  // 手机号校验（11位数字）
  const phone = userList.value.phone.trim();
  const phoneReg = /^1\d{10}$/;
  if (!phoneReg.test(phone)) {
    ElMessage.error('请输入有效的11位手机号码');
    return;
  }

  //密码校验（修改时才校验）
  const password = userList.value.password;
  const confirmPwd = userList.value.confirmPassword;
  if (password) {
    if (password.length < 6) {
      ElMessage.error('密码长度不能少于6位');
      return;
    }
    if (password !== confirmPwd) {
      ElMessage.error('两次输入的密码不一致');
      return;
    }
  }

  //确认保存（弹窗二次确认）
  ElMessageBox.confirm('确定要保存这些修改吗？', '确认保存', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const token = localStorage.getItem('token') || '';
    if (!token) {
      ElMessage.warning('未检测到登录态，请重新登录');
      return;
    }

    const userId = getUserIdFromToken(token);
    if (!userId) {
      ElMessage.warning('Token解析失败，无法保存');
      return;
    }

    //构造提交数据（过滤空值，避免无效参数）
    const updateData = {
      id: userId,
      username: userList.value.username.trim(),
      gender: userList.value.gender || 0,
      signature: userList.value.signature.trim(),
      phone,
      wechat_number: userList.value.wechat_number.trim(),
      birthday: userList.value.birthday || '',
      region: address.value.trim(),
      password: password || undefined // 不修改密码时不提交该字段
    };

    //提交保存请求
    axios.post('http://localhost:8020/user/UpdateUserInfo', updateData, {
      timeout: 15000
    }).then(() => {
      ElMessage.success('信息保存成功');
      // 清空密码输入框（避免下次打开残留）
      userList.value.password = '';
      userList.value.confirmPassword = '';
      // 保存成功后跳转页面
      router.push('/PersonalDataVue');

    }).catch(err => {
      console.error('保存失败:', err);
      ElMessage.error('保存失败，请稍后重试');
    });
  }).catch(() => {
    // 取消保存时不执行任何操作
  });
};

// 高德地图相关逻辑
//全局类型声明（避免TS报错）
declare global {
  interface Window {
    _AMapSecurityConfig: any;
    AMap: any;
  }
}

//高德地图安全配置（替换为你的key和securityJsCode）
window._AMapSecurityConfig = {
  securityJsCode: '1ab5c67ead273f8a27bc365fc75a8425'
};

//打开地区选择弹窗（触发定位）
const selectLocation = () => {
  nearbyLocations.length = 0;
  selectedLocation.value = null;
  locationDialogVisible.value = true;
  getCurrentLocation(); // 打开弹窗后立即定位
};

//加载高德地图脚本（懒加载，避免页面初始化卡顿）
const loadMapScript = (): Promise<void> => {
  return new Promise((resolve, reject) => {
    // 脚本已加载则直接返回
    if (window.AMap && window.AMap.Geolocation && window.AMap.Geocoder) {
      resolve();
      return;
    }

    // 动态创建脚本标签
    const script = document.createElement('script');
    script.type = 'text/javascript';
    // 加载地图2.0版本 + 定位/逆地理编码插件
    script.src = 'https://webapi.amap.com/maps?v=2.0&key=62beb8592d9ea57e01ebfe7299bac710&plugin=AMap.Geocoder,AMap.Geolocation';

    // 脚本加载失败处理
    script.onerror = () => {
      ElMessage.error('高德地图脚本加载失败，请检查网络');
      reject(new Error('地图脚本加载失败'));
    };

    // 脚本加载成功处理
    script.onload = () => {
      if (window.AMap) {
        resolve();
      } else {
        reject(new Error('AMap对象初始化失败'));
      }
    };

    document.head.appendChild(script);
  });
};

//获取当前位置（GPS定位）
const getCurrentLocation = async () => {
  try {
    await loadMapScript(); // 确保脚本加载完成
    const geolocation = new window.AMap.Geolocation({
      enableHighAccuracy: true, // 高精度定位（开启GPS）
      timeout: 10000, // 超时时间10秒
      maximumAge: 0, // 不使用缓存定位结果
      convert: true, // 坐标转换为高德坐标系
      showButton: false, // 隐藏默认定位按钮
      showMarker: false, // 隐藏定位标记
      showCircle: false, // 隐藏定位精度圆
      panToLocation: false, // 不自动移动地图到定位点
      zoomToAccuracy: false // 不自动缩放地图到定位精度
    });

    // 执行定位
    geolocation.getCurrentPosition((status: string, result: any) => {
      if (status === 'complete' && result.position) {
        // 定位成功：解析经纬度获取地区名称
        searchNearbyAddresses(result.position.lng, result.position.lat);
      } else {
        // 定位失败：提示用户
        ElMessage.warning(`定位失败：${result.info || '未知错误'}`);
        nearbyLocations.length = 0;
      }
    });
  } catch (error) {
    ElMessage.error('定位服务不可用，请稍后重试');
    nearbyLocations.length = 0;
  }
};

//逆地理编码（经纬度转省+市名称）
const searchNearbyAddresses = async (lng: number, lat: number) => {
  try {
    const geocoder = new window.AMap.Geocoder(); // 初始化逆地理编码对象
    geocoder.getAddress([lng, lat], (status: string, result: any) => {
      if (status === 'complete' && result.regeocode) {
        const addrComp = result.regeocode.addressComponent || {};
        const province = addrComp.province || ''; // 省名（如“浙江省”）
        const city = addrComp.city || addrComp.province || ''; // 市名（直辖市用省名代替，如“北京市”）

        // 拼接地区名称（避免直辖市重复，如“北京市北京市”→“北京市”）
        const fullAddress = province && city && !city.includes(province)
            ? `${province}${city}`
            : city;

        if (fullAddress) {
          nearbyLocations.length = 0; // 清空旧数据
          nearbyLocations.push({ name: '当前地区', address: fullAddress.trim() });
        } else {
          ElMessage.warning('无法获取有效地区信息');
          nearbyLocations.length = 0;
        }
      } else {
        ElMessage.warning(`地址解析失败：${result.info || '未知错误'}`);
        nearbyLocations.length = 0;
      }
    });
  } catch (error) {
    ElMessage.warning('地址解析失败，请重试');
    nearbyLocations.length = 0;
  }
};

//选择地区（更新选中状态，用于高亮）
const selectLocationItem = (item: { name: string; address: string }) => {
  if (item && item.address.trim()) {
    selectedLocation.value = item;
  }
};

//弹窗确认选择（更新用户地区信息）
const handleDialogConfirm = () => {
  if (!selectedLocation.value) {
    ElMessage.warning('请先选择地区');
    return;
  }
  // 更新地区状态
  isLocation.value = 1;
  address.value = selectedLocation.value.address.trim();
  userList.value.region = address.value;
  // 关闭弹窗并重置数据
  handleDialogClose();
  ElMessage.success('地区选择成功');
};

//清空地区选择
const clearLocation = () => {
  isLocation.value = 0;
  address.value = '';
  userList.value.region = '';
  nearbyLocations.length = 0;
  selectedLocation.value = null;
  ElMessage.info('已清空地区');
};
</script>

<template>
  <!-- 回到上一页 -->
  <el-affix :offset-top="0" :z-index="999">
    <el-col :span="24" style="background: white">
      <el-icon
          :size="20"
          @click="$router.back()"
          style="color: black; margin: 8px; cursor: pointer;"
      >
        <ArrowLeftBold />
      </el-icon>
    </el-col>
  </el-affix>

  <!-- 个人资料修改表单 -->
  <div class="profile-section">
    <h3 class="section-title">个人资料修改</h3>
    <el-form
        ref="profileForm"
        :model="userList"
        label-width="80px"
        class="profile-form"
    >
      <!-- 名字 -->
      <el-form-item label="名字">
        <el-input v-model="userList.username" placeholder="请输入名字" maxlength="20" />
      </el-form-item>

      <!-- 性别 -->
      <el-form-item label="性别">
        <el-radio-group v-model="userList.gender">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 签名 -->
      <el-form-item label="签名">
        <el-input v-model="userList.signature" placeholder="请输入签名" maxlength="50" />
      </el-form-item>

      <!-- 手机号 -->
      <el-form-item label="手机号">
        <el-input v-model="userList.phone" placeholder="请输入 11 位手机号" maxlength="11" type="tel" />
      </el-form-item>

      <!-- 微信号 -->
      <el-form-item label="微信号">
        <el-input v-model="userList.wechat_number" placeholder="请输入微信号" maxlength="30" />
      </el-form-item>

      <!-- 地区选择 -->
      <el-form-item label="地区">
        <div class="location-container">
          <el-input
              v-model="userList.region"
              placeholder="请选择所在地区"
              readonly
              style="flex: 1; margin-right: 10px;"
          />
          <el-button type="primary" @click="selectLocation">选择地区</el-button>
          <el-button type="text" @click="clearLocation" v-if="userList.region.trim()">清空</el-button>
        </div>
      </el-form-item>

      <!-- 密码 -->
      <el-form-item label="密码">
        <el-input
            v-model="userList.password"
            placeholder="请输入密码（不修改请留空）"
            type="password"
            show-password
            minlength="6"
            maxlength="20"
        />
      </el-form-item>

      <!-- 确认密码 -->
      <el-form-item label="确认密码">
        <el-input
            v-model="userList.confirmPassword"
            placeholder="请再次输入密码"
            type="password"
            show-password
            minlength="6"
            maxlength="20"
        />
      </el-form-item>

      <!-- 保存按钮 -->
      <el-form-item>
        <el-button type="success" @click="handleSave">保存</el-button>
      </el-form-item>
    </el-form>
  </div>

  <!-- 地区选择弹窗（含确认/取消按钮） -->
  <el-dialog
      title="选择所在地区"
      v-model="locationDialogVisible"
      width="50%"
      :close-on-click-modal="false"
      @close="handleDialogClose"
      :modal-append-to-body="false"
      :append-to-body="true"
      style="z-index: 9999;"
  >
    <div class="dialog-content" style="max-height: 60vh; overflow-y: auto;">
      <!-- 加载中/无数据提示 -->
      <div v-if="nearbyLocations.length === 0" class="loading-tip">
        正在获取当前地区...
      </div>

      <!-- 地区列表 -->
      <div v-else class="location-list">
        <div
            v-for="(item, index) in nearbyLocations"
            :key="index"
            @click="selectLocationItem(item)"
            :class="{'location-item': true, 'selected-item': selectedLocation?.address === item.address}"
        >
          {{ item.address }}（当前地区）
        </div>
      </div>

      <!-- 异常兜底 -->
      <div v-if="!Array.isArray(nearbyLocations)" class="loading-tip">
        数据加载异常，请关闭弹窗重试
      </div>
    </div>

    <!-- 弹窗底部：确认/取消按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleDialogClose">取消</el-button>
        <el-button type="primary" @click="handleDialogConfirm">确认选择</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
/* 基础布局样式 */
.profile-section {
  width: 100%;
  max-width: 375px;
  min-height: 667px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
}

.section-title {
  text-align: center;
  margin: 10px 0 20px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 表单项样式 */
.el-form-item {
  margin-bottom: 15px;
}

/* 地区选择行样式 */
.location-container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

/* 弹窗内容样式 */
.dialog-content {
  padding: 10px;
  box-sizing: border-box;
}

.loading-tip {
  text-align: center;
  padding: 30px 0;
  color: #666;
  font-size: 14px;
}

/* 地区列表样式 */
.location-list {
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.location-item {
  cursor: pointer;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  transition: background-color 0.2s ease;
  font-size: 14px;
  color: #333;
}

/* 选中项高亮样式 */
.selected-item {
  background-color: #f5f7fa;
  color: #1890ff;
}

.location-item:hover {
  background-color: #f8f9fa;
}

/* 弹窗底部按钮样式 */
.dialog-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
</style>